<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title>动态剖切</title>
    <!--引入第三方的jquery脚本库-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-cesium-local.js"></script>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/cesium/style.css" />
    <script>
        //在JS脚本开发中使用严格模式，及时捕获一些可能导致编程错误的ECMAScript行为
        'use strict';
        //定义三维视图的主要类
        var webGlobe;
        //定义三维瓦片类
        var landscapeLayer;
        //动态剖切对象
        var dynaCut;

        var distance = 0;

        function init() {
            //构造三维视图类（视图容器div的id，三维视图设置参数）
            webGlobe = new Cesium.WebSceneControl('GlobeView', {});
            if (webGlobe) {
                //设置地下模式
                webGlobe.viewer.scene.globe.undergroundMode = true;
                //大气显示
                webGlobe.viewer.scene.skyAtmosphere.show = false;
                //大气显示
                webGlobe.viewer.scene.skyAtmosphere.showGroundAtmosphere = false;
                //透明度
                webGlobe.viewer.scene.globe.enableTransparent = true;
                webGlobe.viewer.scene.globe.transparent = 0.0;
                webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0.00001);
                //开启地形深度检测
                webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true;
                //初始化视图功能管理类
                var sceneManager = new CesiumZondy.Manager.SceneManager({
                    viewer: webGlobe.viewer
                });
                //视点跳转
                sceneManager.flyToEx(112.94845170512113, 30.004246325952618, {
                    height: 2600,
                    heading: 67,
                    pitch: -30,
                    roll: 0
                });
                //构造M3D模型层管理对象
                var m3dLayer = new CesiumZondy.Layer.M3DLayer({
                    viewer: webGlobe.viewer
                });
                var { protocol, ip, port } = window.webclient;
                var drilllayer = m3dLayer.append(
                    `${protocol}://${ip}:${port}/igs/rest/g3d/钻孔_2_钻孔模型s`, {
                    autoReset: false,
                }
                );
                //加载M3D地图文档（服务地址，配置参数）
                landscapeLayer = m3dLayer.append(`${protocol}://${ip}:${port}/igs/rest/g3d/钻孔分层点_Sur_000_Ent`, {
                    autoReset: false,
                    maximumScreenSpaceError: 8,
                    loaded: function (layer) {
                        //进行剖切分析的面，从上往下切，Cesium.Cartesian3中第一个参数是左右，第二个参数是前后，第三个参数是上下
                        var plane = new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0.0), -500.0);
                        //初始化分析功能管理类
                        var analysisManager = new CesiumZondy.Manager.AnalysisManager({
                            viewer: webGlobe.viewer
                        });
                        //创建剖切对象实例
                        dynaCut = analysisManager.createDynamicCutting(landscapeLayer, [plane], {
                            color: new Cesium.Color(0 / 255, 255 / 255, 255 / 255, 0.3)
                        });
                        //设置切面回调函数
                        dynaCut.planes[0].plane.plane = new Cesium.CallbackProperty(function (date) {
                            //设置剖切面距离
                            plane.distance = distance;
                            return Cesium.Plane.transform(plane, landscapeLayer[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0));
                        }, false);
                    }
                });
            }
        }

        function change() {
            distance = Number(document.getElementById('range').value);
        }
    </script>
</head>

<body onload="init()">
    <div id="GlobeView">
        <div class="message" style="left: 10px;">
            <span>
                <font>剖切距离：</font><input type="range" id="range" min="-5000" max="200" value="0" oninput="change()" />
            </span>
        </div>
    </div>
</body>

</html>